<template>
  <div class="edu-page-warp">
    <div class="edu-page-title">{{ $t('abnormal.list') }}</div>
    <el-card
      shadow="never"
      body-style="padding: 24px;">
      <div class="edu-opertion-bar"/>
      <el-table
        ref="studentTable"
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          label="编号"
          prop="code"/>
        <el-table-column
          label="异动类型"
          prop="className"/>
        <el-table-column
          label="可发起申请"
          prop="status">
          <template slot-scope="scope">
            <template v-if="!scope.row.isEdit">
              <el-tag
                v-if="scope.row.status == 0"
                type="info">未启用</el-tag>
              <el-tag
                v-if="scope.row.status == 1"
                type="success">启用</el-tag>
            </template>
            <template v-else>
              <el-select v-model="scope.row.status">
                <el-option
                  label="未启用"
                  value="0"/>
                <el-option
                  label="启用"
                  value="1"/>
              </el-select>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="可直接导入"
          prop="importFlag">
          <template slot-scope="scope">
            <template v-if="!scope.row.isEdit">
              <el-tag
                v-if="scope.row.importFlag == 0"
                type="info">不支持</el-tag>
              <el-tag
                v-if="scope.row.importFlag == 1"
                type="success">支持</el-tag>
            </template>
            <template v-else>
              <el-select v-model="scope.row.importFlag">
                <el-option
                  label="不支持"
                  value="0"/>
                <el-option
                  label="支持"
                  value="1"/>
              </el-select>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="异动时间"
          prop="effectiveFlag">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.effectiveFlag == 1"
              type="info">立即生效</el-tag>
            <el-tag
              v-if="scope.row.effectiveFlag == 2"
              type="info">根据异动时间生效</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="80px">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.isEdit"
              type="text"
              @click="handleEdit(scope)">编辑</el-button>
            <el-button
              v-if="scope.row.isEdit"
              type="text"
              @click="handleUpdate(scope)">保存</el-button>
            <el-button
              v-if="scope.row.isEdit"
              type="text"
              @click="handleClose(scope)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="edu-pagination">
        <div class="float-right">
          <el-pagination
            :current-page="queryForm.pageNum_"
            :page-sizes="[20,50,100,500,1000]"
            :page-size="queryForm.pageSize_"
            :total="queryForm.total"
            layout="total, sizes, prev, pager, next, jumper"
            style="float: right;margin:0;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import * as API from "common/src/api/studentinfo";

  export default {
    name: "abnormalList",
    data() {
      return {
        tableData: [],
        queryForm: {
          pageSize_: 20,
          pageNum_: 1,
          total: 0
        }
      }
    },
    methods: {
      init() {
        API.getAbnormalList(this.queryForm).then(res => {
          if(res && res.code == 200) {
            _.forEach(res.data.list, (item) => {
              item.status = item.status + '';
              item.importFlag = item.importFlag + '';
            })
            this.queryForm.total = res.data.total;
            this.tableData = res.data.list;
          }
        })
      },
      handleSizeChange(size) {
        this.queryForm.pageSize_ = size;
        this.init();
      },
      handleCurrentChange(page) {
        this.queryForm.pageNum_ = page;
        this.init();
      },
      handleEdit(item) {
        item.row.isEdit = true;
        Vue.set(this.tableData, item.$index, item.row)
      },
      handleClose(item) {
        item.row.isEdit = false;
        Vue.set(this.tableData, item.$index, item.row)
      },
      handleUpdate(item) {
        let obj = {
          id: item.row.id,
          status: item.row.status,
          importFlag: item.row.importFlag
        }
        item.row.isEdit = false;
        API.abnormalUpdate(obj).then(res => {
          if(res && res.code == 200) {
            this.$notify({
              title: '成功',
              message: '修改成功！',
              type: 'success'
            });
            Vue.set(this.tableData, item.$index, item.row)
          } else {
            this.$notify({
              title: '警告',
              message: '修改失败！',
              type: 'warning'
            });
          }
        })
      }
    },
    created() {
      this.init();
    }
  }
</script>

<style scoped>

</style>
